<script setup lang="ts">
import { PropType } from 'vue';
import type { ISocketUser } from '../../type';
import type { IUser } from '../userList/type';

const emits = defineEmits(['clickUser']);
defineProps({
	// 聊天室在线列表
	userList: {
		type: Array as PropType<ISocketUser[]>,
		required: true,
		default: () => [],
	},
	// 谁发来了消息
	privateUserList: {
		type: Array as PropType<IUser[]>,
		required: true,
		default: () => [],
	},
});
// 事件委托 点击用户列表
const clickUserList = (e: Event) => {
	const dom: HTMLElement = e.target as HTMLElement;
	if (dom?.children?.length > 1) return;
	const user: IUser = {
		id: dom.dataset.id!,
		name: dom.title,
		avatar: (dom as any).src,
	};
	emits('clickUser', user);
};

const groupChat = {
	id: 88888888,
	name: '变富小分队',
};
</script>

<template>
	<div class="group-chat">
		<div class="group-item">{{ groupChat.name }}({{ userList.length }}人)</div>
		<div class="group-user" @click="clickUserList">
			<template v-for="item in privateUserList" :key="item.id">
				<img :src="item.avatar" :title="item.name" :data-id="item.id" />
			</template>
		</div>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
